<template>
    <div>
        <h1 class="page-title">商户列表</h1>
        <el-table :data="merchants" stripe style="width: 100%" border>
            <el-table-column prop="merchantId" label="ID"></el-table-column>
            <el-table-column prop="name" label="商户名称"></el-table-column>
            <el-table-column prop="contactName" label="联系人"></el-table-column>
            <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span :class="getStatusClass(scope.row.status)">{{ getStatusText(scope.row.status) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editMerchant(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleteMerchant(scope.row.merchantId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <el-dialog :visible.sync="dialogVisible" title="编辑商户信息">
            <!-- 将 #content 改为 #default -->
            <template #default>
                <el-form :model="editMerchantForm" label-width="120px">
                    <el-form-item label="商户名称">
                        <el-input v-model="editMerchantForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="editMerchantForm.contactName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="editMerchantForm.contactPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="editMerchantForm.address"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="状态">-->
<!--                        <el-select v-model="editMerchantForm.status" placeholder="请选择状态">-->
<!--                            <el-option label="待审核" value="0"></el-option>-->
<!--                            <el-option label="审核通过" value="1"></el-option>-->
<!--                            <el-option label="审核未通过" value="2"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                </el-form>
            </template>
            <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveEditMerchant">保存</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            merchants: [],
            current: 1,
            size: 10,
            total: 0,
            vo: {
                name: ''
            },
            dialogVisible: false,
            editMerchantForm: {
                name: '',
                contactName: '',
                contactPhone: '',
                address: '',
                status: ''
            }
        };
    },
    methods: {
        handleSizeChange(newSize) {
            this.size = newSize;
            this.search();
        },
        handleCurrentChange(newPage) {
            this.current = newPage;
            this.search();
        },
        editMerchant(merchant) {
            this.$axios.get(`/merchant/selectById/${merchant.merchantId}`).then(r => {
                console.log('后端返回数据：', r.data);
                // 直接重新赋值，确保响应式更新
                this.editMerchantForm = {
                    merchantId: r.data.merchantId, // 确保 ID 等字段也正确处理
                    name: r.data.name || '',
                    contactName: r.data.contactName || '',
                    contactPhone: r.data.contactPhone || '',
                    address: r.data.address || '', // 假设后端实际有该字段，日志未显示全
                    status: r.data.status || '0' // 设默认值，确保状态有值
                };
                this.dialogVisible = true;
            }).catch(error => {
                this.$message.error('获取商户信息失败：' + error.message);
            });
        },
        deleteMerchant(id) {
            this.$axios.delete(`merchant/deleteById/${id}`).then(r=> {
                if (r.data) {
                    this.merchants = this.merchants.filter(item => item.merchantId !== id);
                    this.$message.success('删除成功');
                } else {
                    this.$message.error('删除失败');
                }
            })
        },
        search() {
            this.$axios.post(`/merchant/selectByVo/${this.current}/${this.size}`, this.vo, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(r => {
                console.log('商户列表数据：', r.data.list);
                this.merchants = r.data.list;
                this.total = r.data.total;
            }).catch(error => {
                this.$message.error('获取商户列表失败：' + error.message);
            });
        },
        getStatusText(status) {
            switch (status) {
                case 0:
                    return '待审核';
                case 1:
                    return '审核通过';
                case 2:
                    return '审核未通过';
                default:
                    return '未知状态';
            }
        },
        getStatusClass(status) {
            switch (status) {
                case 0:
                    return 'status-pending';
                case 1:
                    return 'status-approved';
                case 2:
                    return 'status-rejected';
                default:
                    return '';
            }
        },
        saveEditMerchant() {
            this.$axios.put(`/merchant/MerchantsUpdate`, this.editMerchantForm).then(r => {
                if (r.data === 'yes') {
                    this.$message.success('商户信息更新成功');
                    this.dialogVisible = false;
                    this.search();
                } else {
                    this.$message.error('商户信息更新失败');
                }
            }).catch(error => {
                this.$message.error('请求出错：' + error.message);
            });
        }
    },
    created() {
        this.search();
    }
};
</script>

<style scoped>
.page-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.el-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.el-table th {
    background-color: #e9ecef;
    font-weight: 600;
    color: #555;
}

.el-table td {
    transition: background-color 0.3s ease;
}

.el-table tr:hover td {
    background-color: #f0f0f0;
}

.status-pending {
    color: #ffc107;
    font-weight: bold;
}

.status-approved {
    color: #28a745;
    font-weight: bold;
}

.status-rejected {
    color: #dc3545;
    font-weight: bold;
}

.el-button:hover {
    transform: scale(1.05);
}
</style>